<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./dolist.css">
    <title>base6</title>
</head>

<body>
    <div class="header">
        <div class="logo">
            <div class="logo_title">
                myToDoList
            </div>
            <div class="logo_input">
                <input type="text" placeholder="请输入日程" cla ss="logo_input_main" id="logo_input_main">
            </div>
        </div>
    </div>
    <div class="body">
        <div class="body_main">
            <div class="body_pre">
                <p class="body_text">正在进行</p>
                <span class="body_num1">0</span>
            </div>
            <ul id="add">
            </ul>
            <div class="body_end">
                <p class="body_text">已经完成</p>
                <span class="body_num2">0</span>
            </div>
            <ul id="end">
            </ul>
            <div class="body_past">
                <p class="body_text">已经过期</p>
                <span class="body_num2">0</span>
            </div>
            <ul id="end">
            </ul>
        </div>
    </div>
    <div class="footer">
        I CAN ONLY TRY MY BEST
    </div>
    <script src="./template-web.js"></script>
    <script id="waitDo" type="text/html">
        {{if isWork}} 
        <div class="body_pre">
            <p class="body_text">正在进行</p>
            <span class="body_num1">{{num1}}</span>
        </div>
        <ul id="add">
            {{each list value i}} {{if value.hasDo == false && value.hasPast == false}}
            <li style="position:relative;" index="{{i}}">
                <input type="checkbox" class="addbox"> {{if value.isWrite == false}}
                <p class="convert"> {{value.content}} </p>
                {{/if}} {{if value.isWrite == true}}
                <input type="text" value="{{value.content}}" class="away"> {{/if}}
                <input value="{{value.cal}}" class="day">
                <span class="body_hide">------ </span>
                <!-- <input value="{{cal}}" type= "text"> -->
            </li>

            {{/if}} {{/each}}
        </ul>
        {{/if}}
    </script>
    <script id="hasDone" type="text/html">
        {{if isWork}}
        <div class="body_end">
            <p class="body_text">已经完成</p>
            <span class="body_num2">{{num2}}</span>
        </div>
        <ul id="end"> {{each list value i}} {{if value.hasDo == true && value.hasPast == false}}
            <li style="position:relative;" index="{{i}}">
                <input type="checkbox" class="addbox" checked> {{if value.isWrite == false}}
                <p class="convert"> {{value.content}} </p>
                {{/if}} {{if value.isWrite == true}}
                <input type="text" value="{{value.content}}" class="away"> {{/if}}
                <input value="{{value.cal}}" class="day">
                <span class="body_hide">------ </span>
            </li>
            {{/if}} {{/each}}
        </ul>{{/if}}
    </script>
    <script id="past" type="text/html">
        <div class="body_past">
            <p class="body_text">已经过期</p>
            <span class="body_num3">{{num3}}</span>
        </div>
        <ul id="pasted">
            {{each list value i}} {{if value.hasPast == true}}
            <li style="position:relative;" index="{{i}}">
                {{if value.isWrite == false}}
                <p class="convert"> {{value.content}} </p>
                {{/if}} {{if value.isWrite == true}}
                <input type="text" value="{{value.content}}" class="away"> {{/if}}
                <p>{{value.cal}}</p>
                <span class="body_hide">------ </span>
            </li>
            {{/if}} {{/each}}
        </ul>
    </script>
    <script>
        (function () {
            var storage = window.localStorage;
            var name = JSON.parse(storage.getItem('key'));
            var data = {
                num1: 0,
                num2: 0,
                num3: 0,
                isWork: true, // 修改可以使这个函数工作与不工作
                list: name || [] //空的数组，等会存放我的信息 list里面有三个三个对象  
                //一个是isWrite 是否可写，一个是content一个是 是否已经完成
            };
            extra();
            //比较两个日期的大小,返回值为1就是大，否则就是小
            function compare(day1, day2) {
                day1 = day1.toString();
                day2 = day2.toString();
                var aday = day1.split("-");
                var bday = day2.split("-");
                if (parseInt(aday[0]) > parseInt(bday[0]) || (parseInt(aday[0]) == parseInt(bday[0]) && parseInt(
                            aday[1]) >
                        parseInt(bday[1])) || (parseInt(aday[0]) == parseInt(bday[0]) && parseInt(aday[1]) ==
                        parseInt(bday[1])) && parseInt(aday[2]) > parseInt(bday[2])) {
                    return 1;
                } else return 0;
            }
            //获取当前时间，格式YYYY-MM-DD
            function getNowFormatDate() {
                var date = new Date();
                var seperator1 = "-";
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var strDate = date.getDate();
                if (month >= 1 && month <= 9) {
                    month = "0" + month;
                }
                if (strDate >= 0 && strDate <= 9) {
                    strDate = "0" + strDate;
                }
                var currentdate = year + seperator1 + month + seperator1 + strDate;
                return currentdate;
            }
            //判断要添加的待办事项是否已经存在，如果是，告诉他不可以添加
            function pushObj(msg) {

                if (repet(msg) == false) {
                    alert("你要做的事情已经在待办事项中了哦，请确认是否重复");
                } else {
                    data.list.push({
                        content: msg,
                        hasDo: false,
                        isWrite: false,
                        hasPast: false,
                        cal: getNowFormatDate()
                    })
                    // reIndex();
                    extra();
                }

            }
            //检查是否重复
            function repet(msg) {
                var flag;
                for (var i of data.list) {
                    if (i.content == trim(msg)) {
                        flag = false;
                        break;
                    }
                }
                return flag;
            }

            //将字符串头和尾的空格都删掉
            function trim(str) {
                return str.replace(/(^\s*)|(\s*$)/g, "");
            }
            //检查字符串，如果字符串是空或者全是空格就alert，
            function textExame(msg) {
                var flag = true;
                if (msg.match(/^\s*$/)) {
                    alert("你还没有输入内容或者输入全是空格哦");
                    flag = false;
                }
                return flag;
            }
            //页面渲染。
            function render() {
                var html1 = template('waitDo', data);
                var html2 = template('hasDone', data);
                var html3 = template("past", data);
                document.getElementsByClassName("body_main")[0].innerHTML = html1 + html2 + html3;

            }
            //计算数量
            function count() {
                var num1 = 0,
                    num2 = 0,
                    num3 = 0;
                for (let i of data.list) {
                    if (i.hasDo == false && i.hasPast == false) {
                        num1++;
                    } else if (i.hasDo == true && i.hasPast == false) {
                        num2++;
                    }
                    if (i.hasPast == true) {
                        num3++;
                    }
                }
                data.num1 = num1;
                data.num2 = num2;
                data.num3 = num3;
            }
            //重新绑定索引
            // function reIndex() {
            //     for (var i = 0; i != data.list.length; i++) {
            //         data.list[i].index = i;
            //     }
            // }
            //重新索引，渲染，计数
            function extra() {
                // reIndex();
                count();
                render();
                save();
            }

            function save() {
                if (!window.localStorage) {
                    alert("浏览器支持localstorage");
                } else {
                    storage.setItem('key', JSON.stringify(data.list))
                }
            }
            //check
            function check() {
                if (document.getElementsByClassName("away").length != 0) {
                    var biao;
                    for (var i = 0; i != data.list.length; i++) {
                        if (data.list[i].isWrite == true) {
                            biao = i;
                        }
                    }
                    data.list[biao].content = document.getElementsByClassName("away")[0].value;
                    data.list[biao].isWrite = false;
                    extra();
                }
            }
            //绑定函数
            function bindEvent() {
                //对文本框的输入绑定函数，如果有重复 ，空格，或者没有输入会报错，否则直接加入数组中
                var inputtext = document.getElementById("logo_input_main");
                inputtext.addEventListener("keypress", function () {
                    var target = event.target;
                    if (event.keyCode == 13) {
                        var sure = textExame(target.value);
                        if (sure) {
                            pushObj(trim(target.value));
                            document.getElementById("logo_input_main").value = "";
                            render();
                            count();
                            save();
                        }
                    }
                });
                var dele = document.getElementsByClassName("body_main")[0];
                dele.addEventListener("click", function () {
                    var target = event.target;
                    var index = target.parentNode.getAttribute("index");
                    if (target.nodeName == "SPAN") {
                        check();
                        var x = data.list.splice(index, 1);
                        extra();
                    }
                    if (target.nodeName == "INPUT" && target.className == "addbox") {
                        check();
                        var x = data.list.splice(index, 1);
                        data.list.splice(data.num1 + data.num2 - 1, 0, {
                            content: x[0].content,
                            hasDo: !x[0].hasDo,
                            isWrite: x[0].isWrite,
                            hasPast: false,
                            cal: x[0].cal
                        })
                        extra();
                    }
                    if (target.nodeName == "P" && target.className == "convert") {
                        check();
                        data.list[index].isWrite = true;
                        extra();
                        document.getElementsByTagName("li")[index].getElementsByClassName("away")[0].addEventListener(
                            "blur",
                            function () {
                                if (repet(trim(document.getElementsByTagName("li")[
                                        index].getElementsByClassName("away")[0].value)) == false) {
                                    alert("重复了");
                                } else {
                                    data.list[index].content = trim(document.getElementsByTagName("li")[
                                        index].getElementsByClassName("away")[0].value.toString());
                                    data.list[index].isWrite = false;
                                    extra();
                                }
                            })
                    }
                    if (target.nodeName == "INPUT" && target.className == "day") {
                        console.log(index);
                        check();
                        target.addEventListener("blur", function () {
                            data.list[index].cal = target.value;
                            extra();
                            if (compare(data.list[index].cal, getNowFormatDate()) == 1) {
                                var x = data.list.splice(index, 1);
                                data.list.splice(data.num1 + data.num2 + data.num3 - 1, 0, {
                                    content: x[0].content,
                                    hasDo: x[0].hasDo,
                                    isWrite: x[0].isWrite,
                                    hasPast: true,
                                    cal: x[0].cal
                                })
                                extra();
                            }
                        })
                    }
                })
            }

            function init() {
                bindEvent();
            }
            init();
        })();
    </script>
</body>

</html>